<template>
  <div style="height: 600px;">
     <!-- 动态查询 -->
     <el-form :model="queryParams" ref="queryRef" v-show="showSearch" :inline="true" label-width="68px">
        <el-form-item label="考试名称" prop="examName">
           <el-input v-model="queryParams.examName" placeholder="请输入课程名称" clearable style="width: 220px"
              @keyup.enter="handleQuery" />
        </el-form-item>

     <el-form-item label="考试时间" prop="beginTime" style="width: 320px">
          <el-date-picker v-model="queryParams.beginTime" value-format="YYYY-MM-DD" type="daterange"
               range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item >
           <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
           <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
     </el-form>
     
     <el-row :gutter="10" class="mb8">
        <el-row style="margin-left: 93%;">
           <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"
              v-if="search">
              <el-button circle icon="Search" @click="toggleSearch()" />
           </el-tooltip>
           <el-tooltip class="item" effect="dark" content="刷新" placement="top">
              <el-button circle icon="Refresh" @click="refresh()" />
           </el-tooltip>
        </el-row>
     </el-row>

     <!-- 表格数据 -->
     <el-table v-loading="loading" :data="roleList" :header-cell-style="{ background: '#eee', color: '#909399' }">
        <template #empty v-if="roleList.length == 0">
                <el-empty description="暂时还没有历史考试信息哦~" />
        </template>
        <el-table-column label="课程编号" type="index" width="110" />
        <el-table-column label="考试名称" prop="name" :show-overflow-tooltip="true" width="100" />
        <el-table-column label="学生名称" prop="nickname" :show-overflow-tooltip="true" width="100" />
        <el-table-column label="邮箱" prop="email" :show-overflow-tooltip="true" width="100" />
        <el-table-column label="学号" prop="studentId" :show-overflow-tooltip="true" width="100" />
        <el-table-column label="学生电话" prop="phone" :show-overflow-tooltip="true" width="100" />
        <el-table-column label="开始时间" prop="beginTime" :show-overflow-tooltip="true" width="100" />
        <el-table-column label="结束时间" prop="endTime" :show-overflow-tooltip="true" width="100" />
        <el-table-column label="考试时长" prop="examDuration" :show-overflow-tooltip="true" width="100" />
        <el-table-column label="考试得分" prop="scope" :show-overflow-tooltip="true" width="80" />
        <el-table-column label="是否及格" :show-overflow-tooltip="true" width="100">
         <template #default="scope">
            <el-tag type="success" v-if="scope.row.scope >= passScore">及格</el-tag>
            <el-tag type="danger" v-else>不及格</el-tag>
         </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
              <el-tooltip content="查看试卷" placement="top">
                 <el-button link type="primary" icon="View" @click="handleAuthUser(scope.row)"
                    v-hasPermi="['system:role:edit']"></el-button>
              </el-tooltip>
           </template>
        </el-table-column>
     </el-table>
  </div>
  <el-pagination background v-model:current-page="queryParams.pageNum" v-model:page-size="queryParams.pageSize" 
     :page-sizes="[10, 15, 20, 25]" layout="total, sizes, prev, pager, next, jumper" :total="total"
     @size-change="handleSizeChange" @current-change="handleCurrentChange" />

  <!-- 查看题目 -->
  <el-dialog v-model="dialogVisible" title="" width="800" :before-close="handleClose" :fullscreen="true" v-loading="loading" :show-close="false">
   <div style="position: absolute;top: 0%; width: 98%;" v-loading="loading">
    <div style="height: 80px; width: 99%;background: #F2F6FC;">
       <div id="countdown" style="position: relative; top:40%;margin-left: 16.5%;"><el-text tag="b" size="large">
         考试名称：</el-text>{{student_info.name}}&nbsp;&nbsp;&nbsp;<el-text tag="b" size="large">
         学生姓名：</el-text>{{student_info.nickname}}&nbsp;&nbsp;&nbsp;<el-text tag="b" size="large">
         考试分数：</el-text>{{student_info.scope}}&nbsp;&nbsp;&nbsp;
      </div>  
         <el-check-tag checked @click="dialogVisible = false" size="25" style="position: relative; left: 79%;" type="primary"><el-icon><ArrowLeft /></el-icon>返回</el-check-tag>
    </div>
   <div style="margin-left: 16%; margin-top: 2%;" >
   <div ref="containerRef" style="width: 60%;height: 660px;display: inline-block;overflow-y: auto;-ms-overflow-style: none;scrollbar-width: none;">
        <span id="part0"></span>
        <el-card :id="'part' + (item.id)" v-for="(item, index) in optionsQuestion"
           :body-style="{ padding: item.typeId == 3 || item.typeId == 4 ? '0px' : '20px' }"
           style="margin-bottom: 15px;">
           <template #header>
              <div class="card-header">
                 <span style="display: inline-block;width: 90%;">{{index+1+". "+ item.question.split("/")[0]}}</span>
                 <span style="position: relative;right: 0px;">{{ "( "+(item.typeId==1?'单选题':item.typeId==2?'多选题':item.typeId==3?'判断题':item.typeId==4?'简答题':null)+" )" }}</span>
               </div>
           </template>
           <p style="margin-top: 10px;" v-if="item.typeId == 1"
              :style="{ color: item.stuAnswer == item.answerTxt ? 'BLACK' : 'BLACK'}"
              v-for="(text, i) in item.question.split('/')[1].split('_')" class="text item">{{ text }}</p>
           <p v-if="item.typeId == 2" :style="{ color: getColor(item.answerTxt, i) ? 'black' : 'black' }"
              v-for="(text, i) in item.question.split('/')[1].split('_')" class="text item">{{ text }}</p>
           <template #footer>
           <div > 正确答案：{{item.answerTxt}}</div>
            &nbsp;&nbsp;&nbsp;
           <div :style="{ color: item.stuAnswer == item.answerTxt ? 'BLACK' : 'red'}"> 学生答案：{{item.stuAnswer}}</div>
         </template>
        </el-card>
     </div>
     <!-- <div style="width: 15%;display: inline-block; overflow-y: auto;-ms-overflow-style: none;scrollbar-width: none; position: absolute;top: 32.6%;">
      <el-anchor
          style="height: 520px; padding-top: 40px;width: 150px;margin-left: 2px; border-top: none;"
          :container="containerRef"
          direction="vertical"
          type="horizontal"
          :offset="0"
          @click="handleClick"
        >
         <el-anchor-link v-for="(item,index) in optionsQuestion" :style="{backgroundColor:item.stuAnswer == item.answerTxt ? '#f0f9eb':'#fab6b6'}" style="font-weight: 500;size: 20px;width: 35px;display: inline-block;text-align: center;border-radius: 5px;height: 35px;line-height: 55px;margin-left: 8px;" :href="'#part'+index" >
            {{ index+1}}
          </el-anchor-link>
        </el-anchor>
     </div> -->
     <div
        style="width: 20%;display: inline-block;height: 635px;overflow-y: auto;-ms-overflow-style: none;scrollbar-width: none;overflow: scroll;">
        <el-anchor style="height: 600px;" :container="containerRef" direction="vertical" type="horizontal" :offset="238" :bound="238"
            @click="handleClick">
            <el-anchor-link v-for="(item, index) in optionsQuestion" style="size: 20px;" :href="'#part' + item.id"
           >
                <span :style="{ color: item.stuAnswer == item.answerTxt ? '#73767a' : '#c45656'}">{{index + 1 + '.' + item.question.split('/')[0]}}</span>
               </el-anchor-link>
        </el-anchor>
    </div>
     </div>
   </div>
  </el-dialog>
</template>

<script setup>
import { historyExamination,adminQuestionBySubjectId } from "@/api/user/historyExamination/HistoryExamination_api.js"
import { ref, onMounted,reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useUserStore1 } from '../../store/userStore.js'
const user = useUserStore1().userInfo;
const roleList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const optionsQuestion = ref([])
const dialogVisible = ref(false)


//动态查询
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  subjectName: '',
  beginTime: [],
  userId:user.userId
})
//分页
const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  getList()
}
const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  getList()
}
onMounted(() => {
  getList();
})
/** 查询课程列表 */
function getList() {
     loading.value = true;
  historyExamination(queryParams.value).then(response => {
     roleList.value = response.data.obj.list;
     total.value = response.data.obj.total;
     loading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  queryParams.value.levelId = '';
  queryParams.value.subjectName = '';
  queryParams.value.lpId = '';
  handleQuery();
}
const student_info=ref({})
// 根据课程id查找对应的题目信息
function handleAuthUser(row) {
   student_info.value=row
  loading.value=true
  dialogVisible.value = true
  adminQuestionBySubjectId(user.userId,row.testinfoId).then(res => {
   loading.value=false
     if (res.data.code == 200) {
        optionsQuestion.value = res.data.obj
        CaseStr(res.data.obj)
     }
  })
}
/**将字符串数组转换为字符串 */
function CaseStr(list){
   let match='' 
   list.forEach(element => {
      if(element.stuAnswer != "[]"){
      match =element.stuAnswer.match(/\[([^\]]+)\]/); // 匹配方括号内的内容 
      element.stuAnswer=match[1]
      }else{
       element.stuAnswer=''
      }
   });
}


const getColor = (text, i) => {
  var boo = false
  text.split("").forEach(element => {
     if (element == "A" && i == 0 || element == "B" && i == 1 || element == "C" && i == 2 || element == "D" && i == 3) {
        boo = true
     }
  });
  return boo
}
const props = defineProps({
  /* 是否显示检索条件 */
  showSearch: {
     type: Boolean,
     default: true,
  },
  /* 显隐列信息 */
  columns: {
     type: Array,
  },
  /* 是否显示检索图标 */
  search: {
     type: Boolean,
     default: true,
  },
  /* 显隐列类型（transfer穿梭框、checkbox复选框） */
  showColumnsType: {
     type: String,
     default: "checkbox",
  },
  /* 右外边距 */
  gutter: {
     type: Number,
     default: 10,
  },
})

const emits = defineEmits(['update:showSearch', 'queryTable']);

// 搜索
function toggleSearch() {
  if (showSearch.value == true) {
     showSearch.value = false
  } else {
     showSearch.value = true
  }
  emits("update:showSearch", !props.showSearch);
}

// 刷新
function refresh() {
  getList()
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

/* main-container全局样式 */
.app-container {
  padding: 20px;
}

label {
  font-weight: 700;
}
</style>